<template>
  <div>
    <h1>App</h1>
    <div>
      <el-input v-model="title" />
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <div>
      <el-button :type="active == undefined ? 'primary' : 'info'" size="mini" @click="getLists(undefined)">全部</el-button>
      <el-button :type="active == 1 ? 'primary' : 'info'" size="mini" @click="getLists(1)">未完成</el-button>
      <el-button :type="active == 2 ? 'primary' : 'info'" size="mini" @click="getLists(2)">进行中</el-button>
      <el-button :type="active == 3 ? 'primary' : 'info'" size="mini" @click="getLists(3)">已完成</el-button>
    </div>
    <el-table :data="lists" :row-class-name="tableRowClassName">
      <el-table-column prop="title" label="名称"></el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          {{ statusObj[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="danger" size="mini" @click="del(row.id)">删除</el-button>
          <el-button v-show="row.status !== 1" type="info" size="mini" @click="changeStatus(row.id, 1)">未完成</el-button>
          <el-button v-show="row.status !== 2" type="info" size="mini" @click="changeStatus(row.id, 2)">进行中</el-button>
          <el-button v-show="row.status !== 3" type="info" size="mini" @click="changeStatus(row.id, 3)">未完成</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from 'axios';
const request = axios.create({
  baseURL: 'http://127.0.0.1:3009'
});
export default {
  data() {
    return {
      title: '',
      active: undefined,
      lists: [],
      statusObj: {
        1: '未完成',
        2: '进行中',
        3: '已完成',
      }
    }
  },
  created() {
    this.getLists();
  },
  methods: {
    async add() {
      if (this.title === '') return;
      await request.post('/lists', {
        title: this.title,
        status: 1
      });
      this.getLists();
      this.title = '';
    },
    async del(id) {
      // this.$confirm('确定删除吗').then(async () => {
      //   await request.delete(`/lists/${id}`);
      //   this.getLists();
      // }).catch(() => { })
      try {
        await this.$confirm('确定删除吗');
        await request.delete(`/lists/${id}`);
        this.getLists();
      } catch (error) {
        console.log(error);
      }
    },
    async changeStatus(id, status) {
      await request.patch(`/lists/${id}`, { status });
      this.getLists();
    },
    tableRowClassName({ row }) {
      if (row.status === 1) {
        return 'info-row';
      } else if (row.status === 2) {
        return 'warning-row';
      } else if (row.status === 3) {
        return 'success-row';
      } else {
        return '';
      }
    },
    async getLists(status) {
      this.active = status;
      const where = {};
      if (status) {
        where.status = status;
      }
      const { data } = await request.get('/lists', {
        params: where,
      });
      this.lists = data;
    }
  }
}
</script>

<style>
/* .active {
  background: yellowgreen;
} */

.el-table .info-row {
  background: rgb(230, 240, 253);
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>